import React, { useEffect,useState  } from 'react'
import styles from './disease.module.scss'
import Header from '../../components/Header/Header'
import http from '../../http'
import {useNavigate} from 'react-router-dom'
import { Sidebar } from 'react-vant';
export default function Disease() {
const naviagte=useNavigate()
  // const [tab1value, setTab1value] = useState('0');
  //常见病症类型
interface Diseasetypes {
	departmentName: string,
	id: number,
	pic: string,
  rank:number
}
  //常见药品类型
interface Diseasetypes {
	name: string,
	id: number,
	pic: string,
  rank:number
}
  //查询病症类型
interface SearchDiseasetypes {
	departmentName: number,
	id: number,
	name:string,
}
//  interface Diseasetype {
// 	Diseasetypes?: Diseasetypes[];
// }
  //常见病症数据
  let TopTabList=[
    {
      title:'常见病症',
    },
    {
      title:'常用药品'
    }
  ]
  // 常见药品内容
// interface CategoryListParams {
//   drugsCategoryId: number;
//   page?: number;
//   count?: number;
// }
//常见药品右侧类型
interface RightDrugListType {
  drugsCategoryId: number,
  id:number,
  name: string,
  picture:string

}
   const [departmentId,setdepartmentId]=useState<null | number>(null)
     //常见药品id
     const [DrugtId,setDrugtId]=useState<null | number>(null)
  //常见病症左侧栏数据
  const [DiseaseList,setDisease]=useState<Diseasetypes[]>([])
  //常见病症左侧栏数据
  const [DrugList,setDrugList]=useState<Diseasetypes[]>([])
  useEffect(()=>{
     //常见病症
  GetDisease()
       //常见药品
  GetDrugList()
  },[])
     //常见病症
     const  GetDisease=()=>{
 http.get('/health/share/knowledgeBase/v1/findDepartment').then((res:any)=>{
    setDisease(res.result)
    setdepartmentId(res.result[0].id)
   })
 
     }

     //常见药品
     const GetDrugList=()=>{
      http.get('/health/share/knowledgeBase/v1/findDrugsCategoryList').then((res:any)=>{      
    setDrugList(res.result)
    setDrugtId(res.result[0].id)
   }) 
     }
 
//获取右侧查询后的数据
  useEffect(() => {
    if(!departmentId) return;
    http.get('/health/share/knowledgeBase/v1/findDiseaseCategory',{params:{departmentId:departmentId}}).then((res:any)=>{
    // console.log(res.result);
     setRightList(res.result)
   })
  }, [departmentId])

  //常见药品右侧数据
 useEffect(()=>{
  if(!DrugtId) return;
  http.get('/health/share/knowledgeBase/v1/findDrugsKnowledgeList',{params:{drugsCategoryId:DrugtId,page:1,count:12}}).then((res:any)=>{
    console.log(res.result);
    
     setRightDrugList(res.result)
   })

 },[DrugtId])
  let [pages,setpages]=useState(0)
//tab切换active数据
const handelTopTab=(e:any)=>{
    // console.log(e);
    setpages(e)
    setActive(0)
   GetDisease()
   GetDrugList()
}


   const [active, setActive] = useState(0);

   //左侧栏tab切
   const handelSideTab=(id:number)=>{
     console.log(id)
     setdepartmentId(id)
     setDrugtId(id)
   }
   //右侧数据
   const [RightList,setRightList]=useState<SearchDiseasetypes[]>([])
   //常见病症右侧数据
   const [RightDrugList,setRightDrugList]=useState<RightDrugListType[]>([])
  return (
   
     
      <div className={styles.bodys}>
       <Header ></Header>
      <div className={styles.TopTabList} >
        {
          TopTabList.map((v,i)=>{
            return <span className={`${styles.TopTabSpan} ${pages===i?styles.active:''}`} key={i} onClick={()=>handelTopTab(i)}>{v.title}</span>
          })
        }
      </div>
   {pages===0?
     <div  className={styles.conbox}>
         <Sidebar
      value={active}
      onChange={(v) => {
        setActive(v);
       
      }}
    >
      {
      DiseaseList.map((v,i)=>{
          return <Sidebar.Item title={v.departmentName}  key={i} onClick={()=>handelSideTab(v.id)}/>
        })
      }
    </Sidebar>
    <div className={styles.rightbox}>
     {
        RightList.length>0&&RightList.map((v,i)=>{
          return <span key={i} className={styles.SearchDiseaseSpan} onClick={()=>naviagte(`/healthDetail/${v.id}`)}>{v.name}</span>
        })
     }
    </div>
     </div>:   <div  className={styles.conbox}>
         <Sidebar
      value={active}
      onChange={(v) => {
        setActive(v);
       
      }}
    >
      {
      DrugList.map((v,i)=>{
          return <Sidebar.Item title={v.name}  key={i} onClick={()=>handelSideTab(v.id)}/>
        })
      }
    </Sidebar>
    <div className={styles.rightbox}>
     {
        RightDrugList.length>0&&RightDrugList.map((v,i)=>{
          return <div className={styles.SearchDiseaseSpan} key={i} >
            {/* <img src={v.picture} alt="" /> */}
            <span onClick={()=>naviagte(`/drugDetail/${v.id}`)}>{v.name}</span>
          </div>
        })
     }
    </div>
     </div>
    }  
    </div>
   
    
  )
}
